<script>

// 引入 vue3 的响应式方法
import { ref } from 'vue'
// 引入 vue-router 的路由方法
import { useRouter } from 'vue-router'
// 引入 pinia 的菜单 store
import { useMenuStore } from '@/store/index'
// 引入 axios 用于请求后端接口
import axios from 'axios'

export default {
    name: "Login",
    setup() {
        // 表单引用，用于校验
        const loginFormRef = ref(null)
        // 登录按钮是否禁用
        const confirm_disabled = ref(false)
        // 登录表单数据
        const loginForm = ref({
            no: '',
            password: ''
        })
        // 表单校验规则
        const rules = ref({
            no: [
                { required: true, message: '请输入账号', trigger: 'blur' }
            ],
            password: [
                { required: true, message: '请输密码', trigger: 'blur' }
            ],
        })

        // 获取路由实例
        const router = useRouter()
        // 获取菜单 store 实例
        const store = useMenuStore()

        // 登录确认方法
        const confirm = () => {
            confirm_disabled.value = true
            // 校验表单
            loginFormRef.value.validate((valid) => {
                if (valid) {
                    // 请求后端登录接口
                    // 优先使用 main.js 全局配置的 $httpUrl，避免 undefined
                    const baseUrl = (typeof window !== 'undefined' && window.__VUE_APP__ && window.__VUE_APP__.httpUrl)
                        || (window?.app?.config?.globalProperties?.$httpUrl)
                        || 'http://localhost:8090';
                    axios.post(baseUrl + '/user/login', loginForm.value)
                        .then(res => res.data)
                        .then(res => {
                            console.log(res)
                            if (res.code == 200) {
                                // 登录成功，保存用户信息和菜单
                                sessionStorage.setItem("CurUser", JSON.stringify(res.data.user))
                                console.log(res.data.menu)
                                store.setMenu(res.data.menu)

                                router.replace('/Index')
                            } else {
                                // 登录失败，提示错误
                                confirm_disabled.value = false
                                alert('校验失败，用户名或密码错误！')
                                return false
                            }
                        })
                } else {
                    // 校验失败，按钮恢复可用
                    confirm_disabled.value = false
                    console.log('校验失败')
                    return false
                }
            })
        }

        return {
            loginFormRef,
            confirm_disabled,
            loginForm,
            rules,
            confirm
        }
    }
}
</script>


<template>
    <!-- 登录页面主体 -->
    <div class="loginBody">
        <div class="loginDiv">
            <div class="login-content">
                <h1 class="login-title">用户登录</h1>
                <!-- 登录表单，使用 Element Plus el-form 组件 -->
                <el-form :model="loginForm" label-width="100px" :rules="rules" ref="loginFormRef">
                    <!-- 账号输入框 -->
                    <el-form-item label="账号" prop="no">
                        <el-input style="width: 200px" type="text" v-model="loginForm.no" autocomplete="off"
                            size="small"></el-input>
                    </el-form-item>
                    <!-- 密码输入框 -->
                    <el-form-item label="密码" prop="password">
                        <el-input style="width: 200px" type="password" v-model="loginForm.password" show-password
                            autocomplete="off" size="small" @keyup.enter="confirm"></el-input>
                    </el-form-item>
                    <!-- 登录按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="confirm" :disabled="confirm_disabled">确 定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<style scoped>
.loginBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #B3C0D1;
}

.loginDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    width: 450px;
    height: 330px;
    background: #fff;
    border-radius: 5%;

}

.login-title {
    margin: 20px 0;
    text-align: center;
}

.login-content {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 25px;
    left: 25px;
}
</style>
